<template>
    <div>
        <h3 class="title">例1</h3>
        <div class="card">
            <VoContainer :gutter="20" type="flex" :span="8" label-width="80px" labelAlign="right" alignItems="center" size="small" tooltip >
                <VoView label="洗发水">洗发水，我卖洗发水</VoView>
                <VoView label="学历" value="呵呵"></VoView>
                <VoView :span="12">
                    <template v-slot:label>
                        <span>自定义</span>
                        <el-tooltip content="自定义" placement="top" effect="light">
                            <i class="el-icon-question" style="color: #409EFF;"></i>
                        </el-tooltip>
                    </template>
                    <p>喜欢做的事情喜欢做的事情喜欢做的事情</p>
                    <p>喜欢做的事情喜欢做的事情喜欢做的事情</p>
                    <p>喜欢做的事情喜欢做的事情喜欢做的事情</p>
                    <p>喜欢做的事情喜欢做的事情喜欢做的事情</p>
                    <p>喜欢做的事情喜欢做的事情喜欢做的事情</p>
                    <p>喜欢做的事情喜欢做的事情喜欢做的事情</p>
                </VoView>
                <VoView :span="12" label="爱好" labelAlign="left"  alignItems="start" effect="light" placement="bottom" style="background: skyblue;">喜欢做的事情</VoView>
                <VoView :span="6" label="爱好" v-bind="viewAttr">喜欢做的事情</VoView>
                <VoView :span="6" v-bind="viewAttr" label="好长一段文字好长一段文字好长一段文字好长一段文字" tooltip="好长一段文字好长一段文字好长一段文字好长一段文字">喜欢做的事情</VoView>
                <VoView :span="6" v-bind="viewAttr">喜欢做的事情</VoView>
            </VoContainer>
        </div>

        <h3 class="title">例2</h3>
        <h3 class="title">配置项</h3>
        <div class="card">
            <VoContainer type="flex" :span="8">
                <VoView label="模式">
                    <el-radio-group v-model="model.type" size="mini">
                        <el-radio-button label="flex">flex</el-radio-button>
                        <el-radio-button label="">空</el-radio-button>
                    </el-radio-group>
                </VoView>
                <VoView label="大小">
                    <el-radio-group v-model="model.size" size="mini">
                        <el-radio-button label="medium">medium</el-radio-button>
                        <el-radio-button label="small">small</el-radio-button>
                        <el-radio-button label="mini">mini</el-radio-button>
                        <el-radio-button label="">空</el-radio-button>
                    </el-radio-group>
                </VoView>
                <VoView label="边框">
                    <el-radio-group v-model="model.border" size="mini">
                        <el-radio-button label="border">border</el-radio-button>
                        <el-radio-button label="border-bottom">border-bottom</el-radio-button>
                        <el-radio-button label="">空</el-radio-button>
                    </el-radio-group>
                </VoView>
                <VoView label="分栏">
                    <el-input-number v-model="model.span" :min="1" :max="24" :setp="1" :precision="0" size="mini"></el-input-number>
                </VoView>
                <VoView label="标题宽">
                    <!-- <el-input-number v-model="model.labelWidth" :min="0" :max="1000" :setp="1" :precision="2" size="mini"></el-input-number> -->
                    <el-input v-model="model.labelWidth" type="text" size="mini"></el-input>
                    <el-radio-group v-model="model.labelWidth" size="mini">
                        <el-radio-button v-for="item in labelWidthGroup" :key="item" :label="item">{{item}}</el-radio-button>
                    </el-radio-group>
                </VoView>
                <VoView label="标题对齐">
                    <el-radio-group v-model="model.labelAlign" size="mini">
                        <el-radio-button label="left">left</el-radio-button>
                        <el-radio-button label="center">center</el-radio-button>
                        <el-radio-button label="right">right</el-radio-button>
                        <el-radio-button label="">空</el-radio-button>
                    </el-radio-group>
                </VoView>
                <VoView label="标题背景">
                    <el-color-picker v-model="model.labelStyle.background"></el-color-picker>
                </VoView>
                <VoView label="标题后缀">
                    <el-input v-model="model.labelSuffix" size="mini"></el-input>
                </VoView>
                <VoView label="tooltip提示">
                    <el-switch v-model="model.tooltip"></el-switch>
                </VoView>
                <VoView label="tooltip位置" :span="24">
                    <el-radio-group v-model="model.placement" size="mini">
                        <el-radio-button label="top">top</el-radio-button>
                        <el-radio-button label="top-start">top-start</el-radio-button>
                        <el-radio-button label="top-end">top-end</el-radio-button>
                        <el-radio-button label="bottom">bottom</el-radio-button>
                        <el-radio-button label="bottom-start">bottom-start</el-radio-button>
                        <el-radio-button label="bottom-end">bottom-end</el-radio-button>
                        <el-radio-button label="left">left</el-radio-button>
                        <el-radio-button label="left-start">left-start</el-radio-button>
                        <el-radio-button label="left-end">left-end</el-radio-button>
                        <el-radio-button label="right">right</el-radio-button>
                        <el-radio-button label="right-start">right-start</el-radio-button>
                        <el-radio-button label="right-end">right-end</el-radio-button>
                        <el-radio-button label="">空</el-radio-button>
                    </el-radio-group>
                </VoView>
                <VoView label="tooltip主题">
                    <el-radio-group v-model="model.effect" size="mini">
                        <el-radio-button label="dark">dark</el-radio-button>
                        <el-radio-button label="light">light</el-radio-button>
                        <el-radio-button label="">空</el-radio-button>
                    </el-radio-group>
                </VoView>
                <VoView label="垂直对齐">
                    <el-radio-group v-model="model.alignItems" size="mini">
                        <el-radio-button label="start">start</el-radio-button>
                        <el-radio-button label="end">end</el-radio-button>
                        <el-radio-button label="center">center</el-radio-button>
                        <el-radio-button label="baseline">baseline</el-radio-button>
                        <el-radio-button label="stretch">stretch</el-radio-button>
                        <el-radio-button label="">空</el-radio-button>
                    </el-radio-group>
                </VoView>
            </VoContainer>
        </div>
        <h3 class="title">效果</h3>
        <div class="card">
            <VoContainer
                v-bind="model"
            >
                <VoView label="品种/品系">小鼠/C57BL/6</VoView>
                <VoView label="性别">雄性</VoView>
                <VoView label="质量合格证编号">123456789</VoView>
                <VoView label="供应商">ceshi</VoView>
                <VoView label="自编号">
                    <p>XS150902111A15E23004800004</p>
                    <p>XS150902111A15E23004800004</p>
                </VoView>
                <VoViewGroup>
                    <VoView label="批次号" :span="24">123456789</VoView>
                    <VoView label="初始年龄段" :span="24">2-3周</VoView>
                    <VoView label="周龄" :span="24">3周</VoView>
                    <VoView label="初始重量段" :span="24">25-30g</VoView>
                </VoViewGroup>
                <VoView label="重量">500g</VoView>
                <VoView label="状态">饲养中</VoView>
                <VoView label="渠道">购买</VoView>
                <VoView label="饲养天数">9</VoView>
                <VoView label="动物室/笼架/笼位">测试621/2/1A</VoView>
                <VoView label="父系编号">F1354451</VoView>
                <VoView label="母系编号">M4561143</VoView>
                <VoView label="原始编号">O2543114</VoView>
                <VoView label="出生日期">2019-05-02</VoView>
                <VoViewGroup></VoViewGroup>
                <VoView label="体态特征" :span="24">小脚、肥硕</VoView>
                <VoView label="一段很长很长很长很长很长很长很长很长很长很长很长很长的标题">
                    一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的内容
                </VoView>
            </VoContainer>
        </div>

        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from './md/sv.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            labelWidthGroup: ['160px', '8rem'],
            model: {
                type: 'flex',
                size: null,
                border: 'border',
                labelSuffix: '',
                labelWidth: '140px',
                labelAlign: 'right',
                span: 12,
                tooltip: true,
                placement: 'top',
                effect: 'dark',
                alignItems: 'top',
                labelStyle: {
                    background: '#FAFAFA'
                }
            },
            viewAttr: {
                xs: { span: 24 },
                sm: { span: 12 },
                md: { span: 8 },
                lg: { span: 6 },
                xl: { span: 4 }
            }
        }
    }
}
</script>

<style scoped>
.card{
    padding: 20px;
}
.title{
    background: #fdf5e6;
    padding: 10px;
    color: #303133;
    border-bottom: 1px solid #DCDFE6;
}
</style>
